<template>
	<div>
		<el-form :inline="true" :model="query" label-width="130px" size="small">
			<!-- 申请申请ID查询 -->
			<el-form-item label="申请ID：" class="query-form-item">
				<el-input v-model="query.id" placeholder="请输入申请ID" prefix-icon="el-icon-search"
					@keyup.enter.native="onSubmit" clearable></el-input>
			</el-form-item>
			<!-- 申请公司名称查询 -->
			<el-form-item label="商城公司名称：" class="query-form-item">
				<el-input v-model="query.enterpriseName" placeholder="请输入公司名称" prefix-icon="el-icon-search"
					@keyup.enter.native="onSubmit" clearable></el-input>
			</el-form-item>
			<!-- 申请生成时间 -->
			<el-form-item label="申请生成时间：">
				<el-date-picker v-model="createTime" unlink-panels type="datetimerange" :picker-options="pickerOptions"
					range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" align="left"
					format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
					:default-time="['00:00:00', '23:59:59']" @change="dateChange"></el-date-picker>
			</el-form-item>
			<!-- 查询框 -->
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="onSubmit" size="small">搜索</el-button>
			</el-form-item>
		</el-form>
		<!-- table表单 -->
		<el-table ref="multipleTable" v-loading="loading" :data="tableData"
			:header-cell-style="{ background: '#F4F4F5', color: '#606266' }" border>
			<el-table-column type="selection" width="55" fixed></el-table-column>
			<el-table-column label="序号" type="index" width="80" align="center">
				<template scope="scope">
					<span>{{
            (query.currentPage - 1) * query.pageSize + scope.$index + 1
          }}</span>
				</template>
			</el-table-column>
			<el-table-column label="申请ID" prop="id" align="center" width="150"></el-table-column>
			<el-table-column label="申请状态" align="center" width="150">
				<template slot-scope="scope">
					<span v-if="scope.row.auditstatus == 0">待审核</span>
					<span v-else-if="scope.row.auditstatus == 1">已完成</span>
					<span v-else-if="scope.row.auditstatus == 2">驳回</span>
					<span v-else-if="scope.row.auditstatus == 3">处理中</span>
				</template>
			</el-table-column>
			<el-table-column label="申请类型" align="center" width="150">
				<template slot-scope="scope">
					<span v-if="scope.row.applicationtype == 1">转账付款</span>
					<span v-else-if="scope.row.applicationtype == 2">现金付款</span>
					<span v-else-if="scope.row.applicationtype == 3">结款</span>
				</template>
			</el-table-column>
			<el-table-column label="申请商城名称" prop="enterpriseName" align="center" width="150" />
			<el-table-column label="联系电话" prop="tel" align="center" width="150" />
			<el-table-column label="收款账户" prop="corporateaccount" align="center" width="150" />
			<el-table-column label="资金凭证" prop="fundvoucher" align="center" width="150" />
			<el-table-column label="申请金额" prop="transactionquota" align="center" width="150" />
			<el-table-column label="申请生成时间" width="180" :show-overflow-tooltip="true" align="center">
				<template slot-scope="scope">
					<i class="el-icon-time" v-if="scope.row.applicationtime != null"></i>
					<span v-if="scope.row.applicationtime != null">{{ scope.row.applicationtime | formatDateStr("yyyy-MM-dd hh:mm:ss")}}</span>
					<span v-else>无</span>
				</template>
			</el-table-column>
			<!-- <el-table-column label="备注" align="center" width="180" prop="remarks" /> -->
			<el-table-column label="操作" align="center" width="180" fixed="right">
				<template slot-scope="scope">
					<el-button type="primary" size="mini" @click.native="Approved(scope.row)">审核通过</el-button>
					<el-button type="danger" size="mini" @click.native="Rejection(scope.row)">驳回</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination class="pagination-container" background :page-size="query.pageSize"
			@size-change="handleSizeChange" @current-change="handleCurrentChange"
			layout="total,sizes,prev, pager, next, jumper" :current-page="this.query.currentPage"
			:page-sizes="[10, 20, 30, 50]" :total="totalNumber">
		</el-pagination>
		<!-- 编辑页面 -->
		<el-dialog title="提示" :visible.sync="detailVisible" width="30%" top="5vh" :close-on-click-modal="false">
			<template slot="title">
				<div class="avue-crud__dialog__header">
					<span class="el-dialog__title">
						<span style="
                display: inline-block;
                background-color: #3478f5;
                width: 3px;
                height: 20px;
                margin-right: 5px;
                float: left;
                margin-top: 2px;
              "></span>
						确定要驳回？
					</span>
				</div>
			</template>
			<el-card>
				<el-form :model="formEditData" :rules="formEditRules" ref="editRules" label-width="100px" class="sss">
					<el-form-item label="驳回原因：" prop="rejectiontext">
						<el-radio-group v-model="formEditData.rejectiontext">
							<div class="c-radio">
								<el-radio label="收款账号错误" size="medium"></el-radio>
							</div>
							<div class="c-radio">
								<el-radio label="银行开户行错误" size="medium"></el-radio>
							</div>
							<div class="c-radio">
								<el-radio label="申请金额错误" size="medium"></el-radio>
							</div>
							<div class="c-radio">
								<el-radio label="其他" size="medium"></el-radio>
							</div>
						</el-radio-group>
					</el-form-item>
				</el-form>
			</el-card>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="detailVisible = false">取消</el-button>
				<el-button type="primary" @click.native="edit('editRules')">提交</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import {
		getPayApply, //获取列表
		settlementAdoptOrReject, //驳回或者通过
	} from "../../api/fundsManagement/index";
	export default {
		data() {
			return {
				tableData: [], //列表集合
				createTime: [], //时间数组
				detailVisible: false, //新增弹窗
				query: {
					currentPage: 1,
					pageSize: 10,
					auditstatus: 3,
					id: "",
					enterpriseName: "",
					startTime: "", //开始时间
					endTime: "", //结束时间
					transactiontype:2,
					applicationtype:3,
				},
				totalNumber: 0,
				loading: false,
				formEditData: {
					rejectiontext: "",
					id: "",
				},
				formEditRules: {
					rejectiontext: [{
						required: true,
						message: "请选择驳回原因",
						trigger: "change"
					}, ],
				},
				pickerOptions: {
					//快速选择日期
					shortcuts: [{
							text: "最近一周",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近一个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近三个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								picker.$emit("pick", [start, end]);
							},
						},
						{
							text: "最近六个月",
							onClick(picker) {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
								picker.$emit("pick", [start, end]);
							},
						},
					],
				},
			};
		},
		methods: {
			/*日期选择事件*/
			dateChange(val) {
				if (val == null) {
					this.query.startTime = "";
					this.query.endTime = "";
				} else {
					this.query.startTime = val[0];
					this.query.endTime = val[1];
					this.query.currentPage = 1;
				}
				this.getList();
				console.log(this.query);
			},
			// 通过审核
			Approved(ids) {
				// if (ids) {
				this.$confirm("确认要发起银行处理?", "提示", {
						type: "warning",
					})
					.then(() => {
						let form = {
							id: ids.id,
							auditstatus: 1,
						};
						settlementAdoptOrReject(form)
							.then((res) => {
								if (res.code != 0) {
									this.$message.error(res.message);
									return false;
								}
								this.onSubmit();
								this.$message.success("操作成功");
							})
							.catch((err) => {
								console.log(err);
							});
					})
					.catch((err) => {
						console.log(err);
					});
				// }
			},
			// 驳回
			Rejection(ids) {
				this.detailVisible = true;
				this.formEditData.id = ids.id;
			},
			//确认驳回
			edit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let form = {
							rejectiontext: this.formEditData.rejectiontext,
							id: this.formEditData.id,
							auditstatus: 2,
						};
						settlementAdoptOrReject(form)
							.then((res) => {
								if (res.code != 0) {
									this.$message.error(res.message);
									return false;
								}
								this.detailVisible = false;
								this.onSubmit();
								this.$message.success("已驳回");
							})
							.catch((err) => {
								console.log(err);
							});
					} else {
						console.log("error submit!!");
						return false;
					}
				});
			},
			// 列表数据获取
			getList() {
				this.loading = true;
				getPayApply(this.query)
					.then((data) => {
						if (data.code != 0) {
							this.$message.error(data.message);
							this.loading = false;
							return false;
						}
						this.tableData = data.data.list || [];
						this.totalNumber = data.data.totalNumber || 0;
						// console.log(this.tableData)
						setTimeout(() => {
							this.loading = false;
						}, 0.3 * 1000);
					})
					.catch((err) => {
						this.loading = false;
						this.tableData = [];
					});
			},
			//查询
			onSubmit() {
				this.query.currentPage = 1;
				this.getList();
				// console.log('submit!');
			},
			handleCurrentChange(val) {
				this.query.currentPage = val;
				//scrollTo(0, 800);
				this.getList();
			},
			handleSizeChange(val) {
				this.query.pageSize = val;
				this.getList();
			},
		},

		mounted() {},
		created() {
			this.getList();
		},
	};
</script>
<style scoped>
</style>
